<template>
  <div>
    <!-- <div>Test S2</div> -->

    <h1>销售分析</h1>
    <div>
      <SheetComponent :dataCfg="dataCfg" :options="options" />
    </div>
  </div>
</template>

<script setup>
// import { S2DataConfig, S2Options } from '@antv/s2'
import { SheetComponent } from '@antv/s2-vue'
import { onMounted, reactive, ref, shallowRef } from 'vue'
import '@antv/s2-vue/dist/style.min.css'

import { rpc } from '@/odoojs/index.js'

onMounted(async () => {
  const SOL = rpc.env.model('sale.order.line')

  //   const metadata =
  await SOL.load_metadata({
    fields: [
      'product_id',
      'order_partner_id',
      'price_total',
      'product_uom_qty',
      'qty_delivered',
      'qty_invoiced'
    ]
  })

  const records = await SOL.load_data({
    domain: [],
    fields: [
      'product_id',
      'order_partner_id',
      'price_total',
      'product_uom_qty',
      'qty_delivered',
      'qty_invoiced'
    ]
  })

  console.log(records)

  const records2 = records
    .filter(item => item.product_id.id)
    .map(item => {
      const {
        product_id,
        order_partner_id,
        price_total,
        product_uom_qty,
        qty_delivered,
        qty_invoiced
      } = item
      return {
        // ...item,
        // product_id: product_id.display_name,
        // order_partner_id: order_partner_id.display_name
        金额: price_total,
        数量: product_uom_qty,
        已送货: qty_delivered,
        已经开票: qty_invoiced,
        商品: product_id.display_name,
        客户: order_partner_id.display_name
      }
    })

  const cfg = {
    fields: {
      rows: ['商品'],
      columns: ['客户'],
      values: [
        '金额'
        // '数量'
        // 'qty_delivered',
        // 'qty_invoiced'
      ]
    },
    data: records2
  }

  dataCfg.value = cfg
})

// dataCfg 数据字段较多，建议使用 shallow, 如果有数据更改直接替换整个对象
const dataCfg = shallowRef({
  fields: {
    rows: ['商品'],
    columns: ['客户'],
    values: [
      '金额'
      // '数量'
      // 'qty_delivered',
      // 'qty_invoiced'
    ]
  },
  data: []
})
const options = reactive({
  width: 600,
  height: 600
})

const data = [
  {
    province: '浙江',
    city: '杭州',
    type: '家具',
    sub_type: '桌子',
    price: '1'
  },
  {
    province: '浙江',
    city: '杭州',
    type: '家具',
    sub_type: '沙发',
    price: '2'
  },
  {
    province: '浙江',
    city: '杭州',
    type: '办公用品',
    sub_type: '笔',
    price: '3'
  },
  {
    province: '浙江',
    city: '杭州',
    type: '办公用品',
    sub_type: '纸张',
    price: '4'
  }
]
</script>
<style scoped></style>
